<template>
  <div class="box">我是普通的前端渲染</div>
  <p>{{ num }}</p>
  <button @click="add">加1</button>
</template>

<script setup lang="ts">
import { ref } from "vue"
// 在components文件下的组件无需自己手动导入,在app.vue中使用时可以自动导入
// 定义在components的组件都是普通的前端渲染
const num = ref(10)
function add() {
  num.value += 1
}
</script>

<style scoped>
.box {
  background-color: blueviolet;
  color: white;
  align-items: center;
  line-height: 150px;
  width: 150px;
  height: 150px;
}
</style>
